<template>

    <div class="comp-icon-select" @click="openIconSelectDialog">
        <el-image style="width: auto; height: 80%" :src="iconSrc"/>
    </div>

    <!-- 图标选择 -->
    <el-dialog v-model="iconData.visible" title="选择图标" width="800" append-to-body>
        <el-tabs v-model="iconData.tabActive" type="card">
            <el-tab-pane :label="item.name" :name="item.id" v-for="item of typeList">
                <div class="img-select-container">
                    <div class="img-item" v-for="ele of getIconListByType(item.id)" @click="selectIcon(ele)">
                        <img :src="ele.icon_image_url"/>
                        <div class="name"> {{ ele.name }}</div>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="iconData.visible = false">取消</el-button>
                <el-button type="primary" @click="submitSelectIcon">确定</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import {reactive} from 'vue';
import {getImageSize} from '@/utils/util.js';

const props = defineProps({
    hotspotType: {type: String},
    typeList: {type: Array, default: () => []},
    typeIconMap: {type: Object, default: () => ({})}
})

const iconSrc = defineModel('iconSrc', {
    default: '192.168.111.158:7001/public/uploads/def_hotspot.png',
    type: String
})


const iconData = reactive({
    value: '1',
    visible: false,
    tabActive: '1',
    selectedIconUrl: '',
})


// 打开图标选择对话框
function openIconSelectDialog() {
    iconData.visible = true;
    iconData.tabActive = props.hotspotType;
    iconData.selectedIconUrl = props.iconSrc
}

// 提交选择图标
function submitSelectIcon() {
    iconData.visible = false;
    getImageSize(iconData.selectedIconUrl, ({width, height}) => {
        // addUpdateHotspotMarker({
        //     id: hotspotData.cur.id,
        //     image: iconData.selectedIconUrl,
        //     size: {
        //         width: width,
        //         height: height
        //     }
        // })
        // hotspotData.cur.image = iconData.selectedIconUrl;
        // hotspotData.cur.size = {
        //     width: width,
        //     height: height
        // };
        // hotspotData.cur.data.ratio = width / height;
        // TIT_DIRChange(hotspotData.cur.title.style.TIT_DIR)
    })
}


// 点击选择图标
function selectIcon(item) {
    iconData.selectedIconUrl = item.icon_image_url;
}


// 通过图标类型获取图标列表
function getIconListByType(type) {
    let list = [];
    if (props.typeIconMap) {
        list = props.typeIconMap[type] || [];
    }
    return list;
}
</script>

<style scoped lang="less">
.comp-icon-select {
    width: 100%;
    height: 100px;
    box-sizing: border-box;
    overflow: hidden;
    background: #262727;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    border-radius: 6px;
    cursor: pointer;

    &:hover {
        border: 1px dashed #4C4D4F;
    }
}

/*图标选择弹框*/
.img-select-container {
    width: 100%;
    height: 520px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 10px;
    overflow: auto;

    .img-item {
        height: 160px;
        background: rgba(0, 0, 0, 0.3);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        cursor: pointer;

        &:hover {
            background: rgba(64, 158, 255, 0.3);
        }

        img {
            height: 77%;
            width: auto;
        }
    }
}


</style>